
                <!DOCTYPE html>
                <html lang="zh">
                <head>
                  <meta charset="UTF-8">
                  <meta name="viewport" content="width=device-width, initial-scale=1.0">
                  <title>Page 5</title>
                  <style>
                    *,
                    *::before,
                    *::after {
                      box-sizing: border-box;
                      margin: 0;
                    }
                    .iframe-outer {
                      position: fixed;
                      top: 0;
                      left: 0;
                      bottom: 0;
                      right: 0;
                      display: flex;
                      justify-content: center;
                      background-color: #E0E0E0;
                    }
                    .iframe-wrapper {
                      width: 100%;
                      height: 100%;
                      margin: 0 auto;
                      transform-origin: center top;
                      flex-shrink: 0;
                    }
                    #dynamicIframe {
                      border: none;
                      width: 100%;
                      height: 100%;
                    }
                  </style>
                  <script>
                const width = 402
                const height = 874
                const resolutionRatio = width && height ? width / height : 1
                const pageNameMap = {
                  'page_1': 'Page 1',
    'page_2': 'Page 2',
    'page_3': 'Page 3',
    'page_4': 'Page 4',
    'page_5': 'Page 5'
                }
                function setIframeSize(w, h) {
                  const currentContainerRadio = w / h
                  let widthValue = w
                  let heightValue = h
                  let zoom = 1
                  if (currentContainerRadio > resolutionRatio) {
                    widthValue = h * resolutionRatio
                    heightValue = h
                  } else {
                    widthValue = w
                    heightValue = w / resolutionRatio
                  }
                  zoom = width ? widthValue / width : 1
                  return {
                    width: widthValue / zoom + 'px',
                    height: heightValue / zoom + 'px',
                    zoom,
                  }
                }
                function adjustIframeSize() {
                  const iframeWrapper = document.querySelector(".iframe-wrapper")
                  const { width, height, zoom } = setIframeSize(window.innerWidth, window.innerHeight)
                  iframeWrapper.style.height = height
                  iframeWrapper.style.width = width
                  iframeWrapper.style.transform = 'scale(' + zoom + ')'
                }
                function sanitizeFilename(name) {
                  return name.replace(/[\/:*?"<>|]/g, '_')
                }
                function handlePostMessage(event) {
                  if (!event.data) {
                    return
                  }
                  const { type, targetPageId } = event.data
                  const targetPageName = pageNameMap[targetPageId]
                  if (type === "iframeNavigation" && targetPageId && targetPageName) {
                    window.location.href = targetPageName + '.html'
                  }
                }
                window.addEventListener('message', handlePostMessage)
                window.onload = adjustIframeSize
                window.onresize = adjustIframeSize
                window.onunload = () => {
                  window.removeEventListener('message', handlePostMessage)
                }
              </script>
                </head>
                <body>
                  <div class="iframe-outer">
                    <div class="iframe-wrapper">
                      <iframe id="dynamicIframe" srcdoc='<html lang="zh-CN"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发现</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="./assets/3/3.1.0/iconify.min.js"></script>
    <style>
    /* Custom scrollbar styles */
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }
    .no-scrollbar {
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
    .autumn-text-shadow {
        text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
    }
</style>
  <script src="./assets/static/uxbot/25_6/holder.js"></script></head>
  <body class="bg-white font-sans">
    <div class="container mx-auto max-w-screen-sm">
      <main class="pb-24">
        <div data-section-id="DiscoveryHeader" data-section-type="header" id="ih85" style="width: 100%">
          <header class="bg-white pt-3 sticky top-0 z-10">
            <div class="flex justify-between items-center px-4 pb-2">
              <div class="relative">
                <h1 class="text-2xl font-bold">发现</h1>
                <div class="absolute bottom-[-2px] left-0 w-full h-1 bg-blue-500 rounded-full w-[24px]"></div>
              </div>
              <div class="flex items-center space-x-4">
                <div class="flex items-center text-sm">
                  <span class="iconify text-gray-700" data-icon="ph:map-pin"></span><span class="ml-1">上海</span><span class="iconify text-gray-500" data-icon="mdi:chevron-down"></span>
                </div>
                <span class="iconify text-2xl text-gray-800" data-icon="mi:search"></span>
              </div>
            </div>
            <nav class="px-4 py-2">
              <div class="flex space-x-6 overflow-x-auto no-scrollbar whitespace-nowrap">
                <a href="#" class="text-black font-bold text-base">热门</a><a href="#" class="text-gray-500 text-base">境外</a><a href="#" class="text-gray-500 text-base">景区</a><a href="#" class="text-gray-500 text-base">山川</a><a href="#" class="text-gray-500 text-base">海岛</a><a href="#" class="text-gray-500 text-base">citywalk</a>
              </div>
            </nav>
          </header>
        </div>
        <div data-section-id="ContentGridSection" data-section-type="section" id="in5pi" style="width: 100%">
          <div class="p-4 bg-gray-50">
            <div class="grid grid-cols-2 gap-3">
              <div class="flex flex-col gap-3">
                <!-- Card 1 -->
                <div class="bg-white rounded-lg overflow-hidden shadow-sm">
                  <div class="relative">
                    <img src="https://images.unsplash.com/photo-1700224732905-64673adc26e6?crop=entropy&amp;amp;cs=tinysrgb&amp;amp;fit=crop&amp;amp;fm=jpg&amp;amp;ixid=M3w3MjkzNDZ8MHwxfHNlYXJjaHwzfHxDaGluZXNlJTIwZ2FyZGVuJTIwcG9uZHxlbnwwfHx8fDE3NTg1OTQxNzJ8MA&amp;amp;ixlib=rb-4.1.0&amp;amp;q=80&amp;amp;w=200&amp;amp;h=267" alt="Traditional Chinese garden with a pond, classic architecture, and lush greenery in Suzhou" class="w-full h-auto object-cover">
                    <div class="absolute top-2 left-2 bg-black bg-opacity-40 text-white text-xs px-2 py-0.5 rounded-full">
                      路线
                    </div>
                    <div class="absolute top-2 right-2 bg-black bg-opacity-40 text-white text-xs px-2 py-0.5 rounded-full flex items-center">
                      <span class="iconify mr-1" data-icon="mdi:eye-outline"></span>813
                    </div>
                    <div class="absolute bottom-2 left-2 text-white text-sm font-semibold flex items-center bg-black bg-opacity-30 px-1 rounded">
                      <span class="iconify mr-1" data-icon="ph:map-pin-fill"></span>苏州市
                    </div>
                  </div>
                  <div class="p-2">
                    <h3 class="font-bold text-sm truncate">
                      网师园|沧浪亭|十全街漫游
                    </h3>
                    <p class="text-gray-500 text-xs mt-1">
                      网师园夜游偷师昆曲腔, 沧浪亭漏窗框住宋朝光影🌙
                    </p>
                  </div>
                </div>
                <!-- Card 3 -->
                <div class="bg-white rounded-lg overflow-hidden shadow-sm">
                  <div class="relative">
                    <img src="https://spark-builder.s3.cn-north-1.amazonaws.com.cn/image/2025/9/23/90ba7301-eb86-4123-a02f-7c0fb8d8d206.png" alt="Giant statue head of Shennong overlooking a green valley with straight paths leading to it in Shennongjia" class="w-full h-auto object-cover">
                    <div class="absolute top-2 right-2 bg-black bg-opacity-40 text-white text-xs px-2 py-0.5 rounded-full flex items-center">
                      <span class="iconify mr-1" data-icon="mdi:eye-outline"></span>104
                    </div>
                    <div class="absolute bottom-2 left-2 text-white text-sm font-semibold flex items-center bg-black bg-opacity-30 px-1 rounded">
                      <span class="iconify mr-1" data-icon="ph:map-pin-fill"></span>荆州市
                    </div>
                  </div>
                  <div class="p-2">
                    <h3 class="font-bold text-sm truncate">神农架秘境导览</h3>
                    <p class="text-gray-500 text-xs mt-1">
                      华中屋脊·土家原乡·高山湿地·神农祭祀🌲
                    </p>
                  </div>
                </div>
                <!-- Card 5 -->
                <div class="bg-white rounded-lg overflow-hidden shadow-sm">
                  <div class="relative">
                    <img src="https://images.unsplash.com/photo-1754547252699-07bf218643db?crop=entropy&amp;amp;cs=tinysrgb&amp;amp;fit=crop&amp;amp;fm=jpg&amp;amp;ixid=M3w3MjkzNDZ8MHwxfHNlYXJjaHwyfHxDaGluZXNlJTIwY3Vpc2luZSUyMGZsYXQlMjBsYXl8ZW58MHx8fHwxNzU4NTk0MTc0fDA&amp;amp;ixlib=rb-4.1.0&amp;amp;q=80&amp;amp;w=400&amp;amp;h=200" alt="A collage of two food dishes, one with roasted duck and another with boiled chicken pieces" class="w-full h-auto object-cover">
                    <div class="absolute top-2 right-2 bg-black bg-opacity-40 text-white text-xs px-2 py-0.5 rounded-full flex items-center">
                      <span class="iconify mr-1" data-icon="mdi:eye-outline"></span>396
                    </div>
                  </div>
                  <div class="p-2">
                    <h3 class="font-bold text-sm truncate">神农架美食记</h3>
                    <p class="text-gray-500 text-xs mt-1">
                      地道土家菜，品尝山野的味道
                    </p>
                  </div>
                </div>
              </div>
              <div class="flex flex-col gap-3">
                <!-- Card 2 -->
                <div class="bg-white rounded-lg overflow-hidden shadow-sm">
                  <div class="relative">
                    <img src="https://images.unsplash.com/photo-1671355823934-f4b890500040?crop=entropy&amp;amp;cs=tinysrgb&amp;amp;fit=crop&amp;amp;fm=jpg&amp;amp;ixid=M3w3MjkzNDZ8MHwxfHNlYXJjaHwxfHxKYXBhbmVzZSUyMG1vdW50YWluJTIwdmlsbGFnZXxlbnwwfHx8fDE3NTg1OTQxNzF8MA&amp;amp;ixlib=rb-4.1.0&amp;amp;q=80&amp;amp;w=200&amp;amp;h=222" alt="Japanese village in a valley with snow-capped mountains in the background, Nagano" class="w-full h-auto object-cover">
                    <div class="absolute top-2 left-2 bg-black bg-opacity-40 text-white text-xs px-2 py-0.5 rounded-full">
                      景点
                    </div>
                    <div class="absolute top-2 right-2 bg-black bg-opacity-40 text-white text-xs px-2 py-0.5 rounded-full flex items-center">
                      <span class="iconify mr-1" data-icon="mdi:eye-outline"></span>78
                    </div>
                    <div class="absolute bottom-2 left-2 text-white text-sm font-semibold flex items-center bg-black bg-opacity-30 px-1 rounded">
                      <span class="iconify mr-1" data-icon="ph:map-pin-fill"></span>日本
                    </div>
                  </div>
                  <div class="p-2">
                    <h3 class="font-bold text-sm truncate">
                      长野新泻周游券深度游
                    </h3>
                    <p class="text-gray-500 text-xs mt-1">
                      玩转长野新泻:泡猴汤、访古寺、尝地酒五日巡礼🚄
                    </p>
                  </div>
                </div>
                <!-- Card 4 -->
                <div class="bg-white rounded-lg overflow-hidden shadow-sm">
                  <div class="relative">
                    <img src="https://images.unsplash.com/photo-1699177247360-3540d424e739?crop=entropy&amp;amp;cs=tinysrgb&amp;amp;fit=crop&amp;amp;fm=jpg&amp;amp;ixid=M3w3MjkzNDZ8MHwxfHNlYXJjaHwxfHxwaW5rJTIwY2h1cmNoJTIwVmlldG5hbXxlbnwwfHx8fDE3NTg1OTQxNzB8MA&amp;amp;ixlib=rb-4.1.0&amp;amp;q=80&amp;amp;w=200&amp;amp;h=333" alt="A pink, ornate cathedral, Tan Dinh Church in Ho Chi Minh City, against a blue sky" class="w-full h-auto object-cover">
                    <div class="absolute top-2 right-2 bg-black bg-opacity-40 text-white text-xs px-2 py-0.5 rounded-full flex items-center">
                      <span class="iconify mr-1" data-icon="mdi:eye-outline"></span>102
                    </div>
                    <div class="absolute bottom-2 left-2 text-white text-sm font-semibold flex items-center bg-black bg-opacity-30 px-1 rounded">
                      <span class="iconify mr-1" data-icon="ph:map-pin-fill"></span>越南·胡志明市
                    </div>
                  </div>
                  <div class="p-2">
                    <h3 class="font-bold text-sm truncate">胡志明懒人地图</h3>
                    <p class="text-gray-500 text-xs mt-1">
                      粉红教堂×金融塔漫游·玩透法式南洋风情✨
                    </p>
                  </div>
                </div>
                <!-- Card 6 -->
                <div class="bg-white rounded-lg overflow-hidden shadow-sm">
                  <div class="relative">
                    <img src="https://images.unsplash.com/photo-1678200828429-83baf1a366fc?crop=entropy&amp;amp;cs=tinysrgb&amp;amp;fit=crop&amp;amp;fm=jpg&amp;amp;ixid=M3w3MjkzNDZ8MHwxfHNlYXJjaHwxfHxDaGluZXNlJTIwcm9vZiUyMHNreXxlbnwwfHx8fDE3NTg1OTQxNzN8MA&amp;amp;ixlib=rb-4.1.0&amp;amp;q=80&amp;amp;w=400&amp;amp;h=267" alt="Blue sky with white clouds seen over a traditional Chinese curved tiled rooftop" class="w-full h-auto object-cover">
                    <div class="absolute top-2 right-2 bg-black bg-opacity-40 text-white text-xs px-2 py-0.5 rounded-full flex items-center">
                      <span class="iconify mr-1" data-icon="mdi:eye-outline"></span>660
                    </div>
                  </div>
                  <div class="p-2">
                    <h3 class="font-bold text-sm truncate">屋檐下的天空</h3>
                    <p class="text-gray-500 text-xs mt-1">
                      古建筑之美，仰望一片蔚蓝
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div data-section-id="MainFooter" data-section-type="footer" id="ifqdwq" style="width: 100%">
          <footer class="fixed bottom-0 left-0 right-0 max-w-screen-sm mx-auto h-16 bg-white border-t border-gray-200 shadow-[0_-2px_5px_rgba(0,0,0,0.05)] z-20">
            <div class="flex justify-around items-center h-full relative">
              <a href="#" class="flex flex-col items-center text-blue-500"><span class="iconify text-2xl" data-icon="ant-design:home-filled"></span><span class="text-xs font-semibold">首页</span></a><a href="#" class="flex flex-col items-center text-gray-500"><span class="iconify text-2xl" data-icon="ph:globe-hemisphere-west-light"></span><span class="text-xs">目的地</span></a>
              <div class="w-12 h-12"></div>
              <!-- Placeholder for the central button space --><a href="#" class="flex flex-col items-center text-gray-500"><span class="iconify text-2xl" data-icon="ph:suitcase-simple-light"></span><span class="text-xs">行程</span></a><a href="#" class="flex flex-col items-center text-gray-500"><span class="iconify text-2xl" data-icon="ph:user-light"></span><span class="text-xs">我的</span></a>
              <div class="absolute -top-6 left-1/2 -translate-x-1/2">
                <div class="w-16 h-16 rounded-full bg-gradient-to-br from-yellow-300 to-orange-400 flex items-center justify-center shadow-lg">
                  <span class="text-orange-800 font-bold text-lg autumn-text-shadow">秋游</span>
                </div>
              </div>
            </div>
          </footer>
        </div>
      </main>
    </div>
    <script>
// No specific JavaScript needed for this static page design.
</script>
  

<script>
    setTimeout(() => {
      Holder.run({
        domain: "placehold.co"
      })
    }, 100)
  </script></body></html>'></iframe>
                    </div>
                  </div>

                </body>
                </html>
            